<template >

    <a-layout class="layout-demo">
        <a-layout-sider
                hide-trigger
                collapsible
                :collapsed="collapsed"
        >


            <a-menu

                    :defaultOpenKeys="['/base']"
                    :defaultSelectedKeys="['/base']"
                    :style="{ width: '90%' ,marginTop: '80px',}"
                    @menuItemClick="onClickMenuItem"

            >

               <!-- <a-menu-item v-for="i in newsPaths[0]"
                             :key="i.path" class="menu"

                >
                    <router-link :to="i.path">
                        <IconCalendar />
                        {{ i.name }}
                    </router-link>

                </a-menu-item>-->

                <a-menu-item class="menu"
                    key="/base"
                >
                    <router-link to="/base">
                        <icon-idcard />
                        基本信息
                    </router-link>

                </a-menu-item>

                <a-menu-item class="menu"

                >
                    <router-link to="/refactor">
                        <icon-edit />
                        修改信息
                    </router-link>

                </a-menu-item>

                <a-menu-item class="menu"

                >
                    <!--<router-link to="/mypost">
                        <icon-list />
                        我的发布
                    </router-link>-->

                </a-menu-item>


            </a-menu>

        </a-layout-sider>
        <a-layout style="padding: 0 0">
            <a-layout-header style="padding-left: 20px;">
                <a-button shape="round" @click="onCollapse">
                    <IconCaretRight v-if="collapsed" />
                    <IconCaretLeft v-else />
                </a-button>
            </a-layout-header>

            <a-layout >
                <a-layout-content>
                        <router-view>
                            
                        </router-view>
                </a-layout-content>
            </a-layout>
        </a-layout>
    </a-layout>




</template>

<script  setup>
    import {reactive} from 'vue'
    import message from "@arco-design/web-vue/es/message";
    import {ref} from "@vue/reactivity";
    import myAxios from '../plugins/myAxios';
    import {useRoute} from "vue-router";
    import {useRouter} from "vue-router";
    import {onMounted, watchEffect} from "@vue/runtime-core";
    import {getCurrentUser} from "@/services/user";
    import {routes} from "@/router/routes";

    const router = useRouter();
    const collapsed = ref(false);
    const onCollapse = () => {
        collapsed.value = !collapsed.value;
    };

    // 个人页面的子路由
   /* const visibleRoutes = routes.filter((i, index) => {
        if (i?.children) {
            console.log(i?.children.length)
            return true;
        }
        return false;
    });
    const newsPaths = visibleRoutes.map((i,index) => {
        console.log(i.children)
         return  i.children
    });



    const selectedKeys = ref(["/user/base"]);*/




</script>

<style scoped>

/*.menu-demo{
    width: 100%;
    height: 400px;
    position: sticky;
    background: #f4f4f4;
}*/
/*.menu-demo {
    width: 100%;
    height: 570px;
    padding: 40px;
    box-sizing: border-box;
    background-color: var(--color-neutral-2);
}

.menu-demo .arco-menu {
    width: 200px;
    height: 100%;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}

.menu-demo .arco-menu :deep(.arco-menu-collapse-button) {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.menu-demo .arco-menu:not(.arco-menu-collapsed) :deep(.arco-menu-collapse-button) {
    right: 0;
    bottom: 8px;
    transform: translateX(50%);
}

.menu-demo .arco-menu:not(.arco-menu-collapsed)::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 48px;
    height: 48px;
    background-color: inherit;
    border-radius: 50%;
    box-shadow: -4px 0 2px var(--color-bg-2), 0 0 1px rgba(0, 0, 0, 0.3);
    transform: translateX(50%);
}

.menu-demo .arco-menu.arco-menu-collapsed {
    width: 48px;
    height: auto;
    padding-top: 24px;
    padding-bottom: 138px;
    border-radius: 22px;
}

.menu-demo .arco-menu.arco-menu-collapsed :deep(.arco-menu-collapse-button) {
    right: 8px;
    bottom: 8px;
}*/

.layout-demo {
    height: 580px;
    background: var(--color-fill-2);
    border: 1px solid var(--color-border);
}
.layout-demo :deep(.arco-layout-sider) .logo {
    height: 32px;
    margin: 12px 8px;
    background: rgba(255, 255, 255, 0.2);
}
.layout-demo :deep(.arco-layout-sider-light) .logo{
    background: var(--color-fill-2);
}
.layout-demo :deep(.arco-layout-header)  {
    height: 64px;
    line-height: 64px;
    background: var(--color-bg-3);
}
.layout-demo :deep(.arco-layout-footer) {
    height: 48px;
    color: var(--color-text-2);
    font-weight: 400;
    font-size: 14px;
    line-height: 48px;
}
.layout-demo :deep(.arco-layout-content) {
    color: var(--color-text-2);
    font-weight: 400;
    font-size: 14px;
    background: var(--color-bg-3);
}
.layout-demo :deep(.arco-layout-footer),
.layout-demo :deep(.arco-layout-content)  {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--color-white);
    font-size: 16px;
    font-stretch: condensed;
    text-align: center;
}

</style>
